<template>
  <div class="container">
    <span class="add_shop"><router-link to='/search'><van-icon name="arrow-left" />返回</router-link></span>
    <van-field v-model="inputVal" placeholder="请输入商品名称" />
    <van-button type="info" block @click="handleAddShop">添加商品</van-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      inputVal: ''
    }
  },
  methods: {
    // 添加商品
    async handleAddShop () {
      if (!this.inputVal) {
        this.$notify({
          message: '请输入商品名称',
          duration: 800
        })
        return false
      }
      const { data } = await this.$http.post('/api/addproduct', {
        name: this.inputVal
      })
      if (data.status !== 0) {
        this.$toast('添加失败')
        return false
      }
      this.$notify({
        message: '添加成功',
        duration: 800,
        type: 'success'
      })
      this.inputVal = ''
      this.$router.push('/search')
    }
  }
}
</script>

<style scoped>
.add_shop a {
  position: fixed;
  top: 16px;
  left: 10px;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.container {
  padding: 50px 15px 0 15px;
}

.van-button {
  margin-top: 20px;
}
</style>
